<template>
  <div class="tools-container">
    <div class="group" v-for="item in toolGroup" :key="item.name">
      <!-- 回到初始视角按钮 -->
      <div
        v-for="child in item.children"
        :key="child.name"
        @click="toolClick(child.click)"
      >
        <img
          :class="currentTool === child.click && child.isActive ? 'active' : ''"
          :style="child.style"
          :src="getImageUrl(child.icon)"
          :alt="child.title"
          :title="child.title"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
// 导入所有需要的图片
import resetViewIcon from "@/assets/images/map/reset-view.svg";
import measurePointIcon from "@/assets/images/map/measure-point.svg";
import measureDistanceIcon from "@/assets/images/map/measure-distance.svg";
import measureAreaIcon from "@/assets/images/map/measure-area.svg";
import iQueryIcon from "@/assets/images/map/i-query.svg";
import splitScreenIcon from "@/assets/images/map/split-screen.svg";
import clearDrawIcon from "@/assets/images/map/clear-draw.svg";

// 图片映射对象
const iconMap = {
  "reset-view": resetViewIcon,
  "measure-point": measurePointIcon,
  "measure-distance": measureDistanceIcon,
  "measure-area": measureAreaIcon,
  "i-query": iQueryIcon,
  "split-screen": splitScreenIcon,
  "clear-draw": clearDrawIcon,
};

// 获取图片路径
const getImageUrl = (name) => {
  return iconMap[name];
};

const props = defineProps({
  map: {
    type: Object,
    required: true,
  },
  measureTool: {
    type: Object,
    required: true,
  },
  toggleCompareMode: {
    type: Function,
    required: true
  }
});

const data = reactive({
  currentTool: "",
  toolGroup: [
    {
      name: "1",
      children: [
        {
          name: "1-1",
          title: "回到初始视角",
          icon: "reset-view",
          click: "resetView",
          isActive: false,
          style: {
            width: "21px",
            height: "21px",
          },
        },
      ],
    },
    {
      name: "2",
      children: [
        {
          name: "2-1",
          title: "测点",
          icon: "measure-point",
          click: "measures(point)",
          isActive: true,
          style: {
            width: "23px",
            height: "23px",
          },
        },
        {
          name: "2-2",
          title: "测距",
          icon: "measure-distance",
          click: "measures(distance)",
          isActive: true,
        },
        {
          name: "2-3",
          title: "测面",
          icon: "measure-area",
          click: "measures(area)",
          isActive: true,
        },
      ],
    },
    {
      name: "3",
      children: [
        {
          name: "3-1",
          title: "i查询",
          icon: "i-query",
          click: "iQuery",
          isActive: true,
        },
        {
          name: "3-2",
          title: "分屏对比",
          icon: "split-screen",
          click: "splitScreen",
          isActive: true,
        },
      ],
    },
    {
      name: "4",
      children: [
        {
          name: "4-1",
          title: "清空绘制",
          icon: "clear-draw",
          click: "clearDraw",
          isActive: false,
          style: {
            width: "22px",
            height: "22px",
          },
        },
      ],
    },
  ],
});

// 清空绘制
const clearDraw = () => {
  props.measureTool.deleteAll();
};

// 回到初始视角
const resetView = () => {
  props.map.jumpTo({
    center: [120.476858, 31.358201],
    zoom: 13,
    bearing: 0,
    pitch: 0,
  });
};

// 分屏对比
const splitScreen = (isCompareMode) => {
  props.toggleCompareMode(isCompareMode);
};

// i查询
const iQuery = () => {
  console.log("i查询");
};

const toolClick = (name) => {
  // 先清除绘制和事件
  clearDraw();
  
  if (data.currentTool === name) {
    data.currentTool = "";
    // 如果是测点工具，需要移除点击事件
    if (name.includes("measures") && name.includes("point")) {
      props.measureTool.getMousePosition(false);
    } else if (name === "splitScreen") {
      splitScreen(false);
    }
  } else {
    data.currentTool = name;
    if (name === "resetView") {
      resetView();
    } else if (name.includes("measures")) {
      let type = name.split("(")[1].split(")")[0];
      props.measureTool.startMeasure(type, true);
    } else if (name === "splitScreen") {
      splitScreen(true);
    } else if (name === "clearDraw") {
      clearDraw();
    }
  }
};

// 让父组件修改currentTool
const updateCurrentTool = (value) => {
  data.currentTool = value;
};

defineExpose({
  updateCurrentTool
});

const { toolGroup, currentTool } = toRefs(data);
</script>

<style scoped lang="scss">
.tools-container {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  width: 33px;
  height: 300px;
  .group {
    margin-bottom: 10px;
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 33px;
      height: 33px;
      background-color: #fff;
      border-bottom: 1px solid #e0e0e0;
      cursor: pointer;
      overflow: hidden;
      &:last-child {
        border-bottom: none;
      }
      // 鼠标悬浮样式
      &:hover {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }

  img {
    width: 20px;
    height: 20px;
  }
  .active {
    position: relative;
    left: -100px;
    filter: drop-shadow(#409eff 100px 0);
  }
}
</style>
